<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px" inline>
      <el-form-item label="设备名称">
        <el-input v-model="form.name" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="房间号">
        <el-input v-model="form.useRoom" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="使用人">
        <el-input v-model="form.manager" style="width: 80%;" />
      </el-form-item>
      <el-form-item label="使用时间">
        <el-col :span="11">
          <el-date-picker
            v-model="form.timeRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">查询</el-button>
        <el-button @click="onReset(form)">重置</el-button>
      </el-form-item>
    </el-form>
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow:auto">
      <li style="background-color: aqua;width: 100%" class="infinite-list-item">
        运行中：<el-button type="success" size="small" icon="el-icon-check" circle />
        关机：<el-button type="info" size="small" icon="el-icon-check" circle />
        待机：<el-button type="warning" size="small" icon="el-icon-check" circle />
      </li>
    </ul>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        type="index"
        width="30"
      />
      <!--      <el-table-column align="center" label="设备类型" width="95">-->
      <!--        <template slot-scope="scope">-->
      <!--          &lt;!&ndash;          {{ scope.$index }}&ndash;&gt;-->
      <!--          {{ scope.row.type }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="设备名称" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="使用房间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.useRoom }}
        </template>
      </el-table-column>
      <el-table-column label="使用人" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.manager }}
        </template>
      </el-table-column>
      <el-table-column label="护理人员" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.nursingPerson }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="设备型号" width="150" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.xingHao }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column label="使用时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.beginUseTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 1" type="success" size="small" icon="el-icon-check" circle />
          <el-button v-if="scope.row.status === 2" type="info" size="small" icon="el-icon-check" circle />
          <el-button v-if="scope.row.status === 3" type="warning" size="small" icon="el-icon-check" circle />
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 40px">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="设备详情" :visible.sync="dialogFormVisible">
      <el-form ref="equipmentDetail" label-width="80px" :disabled="diaLook" inline>
        <el-form-item label="设备名称">
          <el-input v-model="equipmentDetail.name" style="width: 80%;" />
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="equipmentDetail.xingHao" style="width: 80%;" />
        </el-form-item>
        <el-form-item label="产品编号">
          <el-input v-model="equipmentDetail.no" style="width: 80%;" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-input v-model="equipmentDetail.type" style="width: 80%;" />
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="equipmentDetail.amount" style="width: 80%;" />
        </el-form-item>
        <el-form-item label="使用房间">
          <el-input v-model="equipmentDetail.useRoom" style="width: 80%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancle">取 消</el-button>
        <el-button type="primary" @click="onUpdate(equipmentDetail)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getEquipmentList, getEquipmentById, updateEquipment, deleteEquipmentById, addEquipment } from '@/api/equipment'
import ChartLine from '../../partChart/chartLint'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: false,
      form: {},
      equipmentDetail: {},
      currentPage: 1,
      dialogFormVisible: false,
      diaLook: true,
      operate: ''
    }
  },
  mounted() {
    const { name, xData, yData } = this
    console.log('AAAAAAAAAA---->' + this.$refs)
    this.$refs.chart_line_one.initChart(name, xData, yData)
  },
  created() {
    this.fetchData(this.form)
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.form.pageNum = val
      getEquipmentList(this.form).then(res => {
        this.list = res.data.rows
      })
    },
    handleEdit(row) {
    },
    showDia(id, operate) {
      if (operate === 'look') {
        getEquipmentById(id).then(res => {
          this.equipmentDetail = res.data
          this.diaLook = true
        })
      } else if (operate === 'edit') {
        getEquipmentById(id).then(res => {
          this.equipmentDetail = res.data
          this.diaLook = false
          this.operate = operate
        })
      } else if (operate === 'add') {
        this.equipmentDetail = {}
        this.diaLook = false
        this.operate = operate
      }
      this.dialogFormVisible = true
    },
    handleDelete(id) {
      deleteEquipmentById(id).then(res => {
        this.onSubmit(this.form)
      })
    },
    onSubmit(param) {
      getEquipmentList(param).then(res => {
        this.list = res.data.rows
      })
    },
    onReset(form) {
      this.form = {}
    },
    onCancle() {
      this.dialogFormVisible = false
      this.equipmentDetail = {}
    },
    onUpdate(data) {
      if (this.diaLook === true) {
        this.dialogFormVisible = false
        this.equipmentDetail = {}
        return
      }
      if (this.operate === 'add') {
        addEquipment(data).then(res => {
          this.dialogFormVisible = false
          this.onSubmit(this.form)
          this.equipmentDetail = {}
        })
      } else if (this.operate === 'edit') {
        updateEquipment(data).then(res => {
          this.dialogFormVisible = false
          this.onSubmit(this.form)
          this.equipmentDetail = {}
        })
      }
      this.operate = ''
    },
    fetchData(param) {
      getEquipmentList(param).then(res => {
        this.list = res.data.rows
      })
    }
  }
}
</script>
